<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - Toggle Demo</title>
  <link rel="stylesheet" href="<?php echo $this->webroot ?>css/jquery-ui.css">
  <script src="<?php echo $this->webroot ?>js/jquery-1.11.1.min.js"></script>
  <style>
  .toggler {
    width: 500px;
    height: 200px;
  }
  .btn {
    padding: .5em 1em;
    text-decoration: none;
  }

  .effe {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
  }
  
  h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
  }
  </style>
  <script>
  /*
	function runEffect() {
		$( "#effect" ).toggle();
	};

	function runEffect2() {
		$( "#effect2" ).toggle();
	};
    */
	var i = 0;
    function runEffect3(){
        if(i == 0){
            $('#effect').hide();
            i=1;
        }else{
            $('#effect').show();
            i=0;
        }
    }
    /*
	$(document).ready(function(){
		$( "#button" ).click(function() {

			runEffect();
		});
		
		$("#button3").click(function(){
			$("#effect3").toggle();
		});
	});
    */
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all effe">
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
    </p>
  </div>
</div>
<button onclick="runEffect3()" id="" class="ui-state-default ui-corner-all btn">Run Effect</button>
<hr/>
<!--
<div class="toggler">
  <div id="effect2" class="ui-widget-content ui-corner-all effe">
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
    </p>
  </div>
</div>
<button  class="ui-state-default ui-corner-all btn">Run Effect</button>
<hr/>

<div class="toggler">
  <div id="effect3" class="ui-widget-content ui-corner-all effe">
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 
    </p>
  </div>
</div>
<button id="button3" class="ui-state-default ui-corner-all btn">Run Effect</button>
<hr/>
 -->
 
</body>
</html>